<template>
  <a-modal
    :visible="visible"
    :title="current ? '编辑' : '新增'"
    okText="确认无误并提交"
    cancelText="取消"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :maskClosable="false"
    :width="'70%'"
  >
    <a-form :form="form" layout="horizontal">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="导航英文名称"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入导航英文名称' }] }]" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="导航中文名称"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['nameCn', { rules: [{ message: '请输入导航中文名称' }] }]" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="导航路径"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['path', { rules: [{ message: '请输入导航路径' }] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="导航图标"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['icon', { rules: [{ message: '请输入导航图标' }] }]" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="父级导航"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-select
              v-decorator="[
                'parent',
                {
                  initialValue: current && current.parentId > 0 ? current.parentId : undefined
                }
              ]"
              placeholder="请选择父级导航"
            >
              <a-select-option v-for="item in menuOptionList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="重定向路径"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['redirect', { rules: [{ message: '请输入重定向路径' }] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="组件路径"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['component', { rules: [{ required: true, message: '请输入组件路径' }] }]" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="导航名称"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['title', { rules: [{ message: '请输入导航名称' }] }]" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="目标"
            :labelCol="{ span: 8 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-input v-decorator="['target', { rules: [{ message: '请输入目标' }] }]" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'AddModal',
  props: {
    visible: Boolean,
    current: Object,
    menuOptionList: Array
  },
  data () {
    return {
      form: this.$form.createForm(this)
    }
  },
  watch: {
    current (val) {
      if (val) {
        console.log('valvalval', val)
        this.$nextTick(() => {
          this.form.setFieldsValue({
            name: val?.name,
            nameCn: val?.nameCn,
            path: val?.path,
            component: val?.component,
            parent: val?.parentId > 0 ? val?.parentId : undefined,
            redirect: val?.redirect,
            icon: val?.meta?.icon,
            target: val?.meta?.target,
            title: val?.meta?.title
          })
        })
      }
    }
  },
  methods: {
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.current) {
            values.id = this.current.id // 如果是编辑，需要传id
          }
          this.$emit('ok', values)
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.$emit('cancel')
    }
  }
}
</script>
